<template>
  <el-drawer
    custom-class="zw_drawer"
    v-model.sync="drawer"
    :direction="direction"
    :size="width"
    @close="handleClose"
    @open="handleOpen"
  >
    <template #title>
      <div class="drawer_tit">
        {{ title }}
      </div>
    </template>
    <template #default>
      <div class="content">
        <el-scrollbar class="main"><slot></slot></el-scrollbar>
      </div>
    </template>
    <template #footer>
      <slot name="bottom"></slot>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const drawer = ref(false);
const title = ref("我是标题2");
const direction = ref("rtl");
const width = ref(425);
const handleClose = () => {
  drawer.value = false;
};
const handleOpen = () => {
  drawer.value = true;
};
defineExpose({
  drawer,
  width,
  title,
});
</script>
<style lang="scss">
.zw_drawer {
  .drawer_tit {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #33302d;
    font-size: 16px;
  }
  .content {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    .main {
      height: 100%;
    }
  }
}
</style>
